let path=require('path')
let htmlWebpackPlugin=require('html-webpack-plugin')
let miniCssExtractPlugin =require('mini-css-extract-plugin')
module.exports={
    entry:{
        index:'./src/entry/index.js',
        b:'./src/entry/b.js'
    },
    output:{
        clean:true,
        assetModuleFilename:'./image/[name].[contenthash:4][ext]'  //静态资源
    },
    module:{
        rules:[
            {
                test:/\.png/,          //"asset/resource"    "asset/inline"     "asset/source"   "asset"
                type:"asset/resource"   //将图片转成路由格式     //将图片转成base64   原格式          更具大小自动适应
            },
            {
                test:/\.jpe?g/,
                type:"asset",
                parser:{
                   dataUrlCondition:{
                       maxSize:5*1024*1024   //小于max值-》base64  大于--》url
                   }
                }    
            },
            // {
            //     test:/\.css$/,
            //     exclude:/node_modules/,
            //     use:['style-loader','css-loader']    //style-loader  将css映入到html中
            // },
            {
                test:/\.(css|less)$/,               //miniCssExtractPlugin|style 二选一
                exclude:/node_modules/,
                use:[miniCssExtractPlugin.loader,'css-loader','less-loader']
            },
            {
                test:/\.js/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],             //编译高级语法
                        plugins:[
                            ['@babel/plugin-transform-runtime']    //处理async/await
                        ]
                    }
                }
            }

        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'../public/index.html'),
            options:{
                title:'hello'
            },
            inject:'body'     //js插入位置
        }),
        new miniCssExtractPlugin({
            filename:'css/[name].[contenthash:4].css'   //抽离的css存放文件
        })
    ],
    optimization:{         //优化配置
        splitChunks:{
            cacheGroups:{
                common:{
                    chunks:'all',
                    maxSize:1,
                    minChunks:2
                },
                vendor:{               //抽离第三方公共文件或者叫缓存第三方文件
                    priority:1,
                    test:/node_modules/,    //匹配的目录
                    name:'vendors',
                    chunks:'all',
                    maxSize:0,
                    minChunks:2
                }
             }
        }
    }
}